﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <link href="css/bootstrap.css" rel="stylesheet" media="screen"/>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="js/jquery.radmenu.js"></script>
    
    <style>
        .radialcontainer {
            position: absolute; 
            width:100px; 
            height:100px; 
            text-align:center;
            display: none;
            font-family: arial;
            font-size: 12px;
        }
        .radial_div_item {
            height:50px;
            padding:10px;
            color:#fff;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            cursor:pointer;
            width: 50px;
            box-shadow: 0 0 14px 0 #555;
            border: solid 1px #fff;
            background: rgb(81,118,142); /* Old browsers */
            background: -moz-linear-gradient(top,  rgba(81,118,142,1) 0%, rgba(48,86,137,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,118,142,1)), color-stop(100%,rgba(48,86,137,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  rgba(81,118,142,1) 0%,rgba(48,86,137,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  rgba(81,118,142,1) 0%,rgba(48,86,137,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  rgba(81,118,142,1) 0%,rgba(48,86,137,1) 100%); /* IE10+ */
            background: linear-gradient(to bottom,  rgba(81,118,142,1) 0%,rgba(48,86,137,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51768e', endColorstr='#305689',GradientType=0 ); /* IE6-9 */
        }

        .radial_div_item:hover {
            background: rgb(50,103,135); /* Old browsers */
            background: -moz-linear-gradient(top,  rgba(50,103,135,1) 0%, rgba(10,63,132,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,103,135,1)), color-stop(100%,rgba(10,63,132,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  rgba(50,103,135,1) 0%,rgba(10,63,132,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  rgba(50,103,135,1) 0%,rgba(10,63,132,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  rgba(50,103,135,1) 0%,rgba(10,63,132,1) 100%); /* IE10+ */
            background: linear-gradient(to bottom,  rgba(50,103,135,1) 0%,rgba(10,63,132,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#326787', endColorstr='#0a3f84',GradientType=0 ); /* IE6-9 */
             border: solid 1px #80e8ff;
        }


        .radial_div_item span{
            font-size: 11px;
            line-height: 13px;
            margin-top: 0px;
            float: left;
            text-shadow: 0 0 5px #000;
        }

        .radial_div_item.active { 
            background-color:#511; color:white;
            padding: 10px; 
            -moz-border-radius:40px;
            z-index:100;
        }

        .box{ width: 20px;height: 20px;float: left;background-color: #00bfff;margin: 40px;cursor: pointer;}
        .box:hover{ background-color: #00ced1;}
	
    </style>
    
    <script>
        $(document).ready(function () {
            jQuery(".radialcontainer").radmenu({
                listClass: 'list', // the list class to look within for items
                itemClass: 'item', // the items - NOTE: the HTML inside the item is copied into the menu item
                radius: 50, // radius in pixels
                animSpeed: 400, // animation speed in millis
                centerX: 30, // the center x axis offset
                centerY: 30, // the center y axis offset
                selectEvent: "click", // the select event (click)
                onSelect: function ($selected) { // show what is returned 
                   
                },
                angleOffset: 0 // in degrees
            });

            


            $(".table, html").on('click', function (e) {
                $(".radialcontainer").fadeOut();
            });
        });
        
        function showRadialMenu(id) {
            
            var e = window.event;

            $(".radialcontainer").fadeOut();
            
            var relX = e.pageX;
            var relY = e.pageY;

            var radialContainer = $("#radial_container_" + id);

            radialContainer.css('top', relY).css('left', relX);
            radialContainer.radmenu("show");
            radialContainer.fadeIn();


            e.stopPropagation();
        }
    </script>
    
    

</head>
    <body>
        
        <div id="box1" class="box" onclick="showRadialMenu(1)"></div>
        
        <div id="box2" class="box" onclick="showRadialMenu(2)"></div>
			
        <div class="radials">
            <div id='radial_container_1' class="radialcontainer">
                <ul class='list'>
                    <li class='item'><i class='icon-file icon-white'></i><span>Sync Content</span></li>
                    <li class='item'><i class='icon-wrench icon-white'></i><span>Sync Settings</span></li>
                    <li class='item'><i class='icon-edit icon-white'></i><span>Site Settings</span></li>
                </ul>
            </div>
            <div id='radial_container_2' class="radialcontainer">
                <ul class='list'>
                    <li class='item'><i class='icon-edit icon-white'></i><span>Site Settings</span></li>
                    <li class='item'><i class='icon-file icon-white'></i><span>Sync Content</span></li>
                    <li class='item'><i class='icon-wrench icon-white'></i><span>Sync Settings</span></li>
                </ul>
            </div>
        </div>

        
    </body>
</html>
